<template>
  <div style="padding:0px 8px">
      <el-card class="configContainer" style="height: 100%;">
        <div style="display: flex;flex-direction: row;align-items: center">
          <h4 class="card-title"> 成绩汇总 </h4>
          <div class="space"/>
        </div>
        <el-divider/>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input clearable v-model="searchForm.stuName"></el-input>
          </el-form-item>
          <el-form-item label="年级" prop="year">
            <el-select  @change="getClassByGrade(searchForm.year)" v-model="searchForm.year" placeholder="选择年级">
              <el-option label="七年级" :value="1"/>
              <el-option label="八年级" :value="2"/>
              <el-option label="九年级" :value="3"/>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-select  v-model="searchForm.classId" placeholder="选择班级">
              <el-option v-for="item in classList" :key="item.id" :label="item.className" :value="item.id"/>
            </el-select>
          </el-form-item>


          <el-form-item label="学期">
            <el-select clearable v-model="searchForm.semester" placeholder="输入学期进行检索">
              <el-option v-for="item in semesterList" :key="item.value" :label=item.text :value=item.value />
            </el-select>
          </el-form-item>
          <el-form-item label="导出类型">
            <el-select clearable  v-model="searchForm.type" placeholder="导出类型">
              <el-option  label="全部" :value="null" />
              <el-option  label="六选二" :value="1" />
              <el-option  label="八选二" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item  label="性别">
            <el-radio v-model="searchForm.sex" label="">全选</el-radio>
            <el-radio v-model="searchForm.sex" label="1">男</el-radio>
            <el-radio v-model="searchForm.sex" label="2">女</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button @click="getScoreCollect()" type="primary" :icon="Search">
              <el-icon>
                <Search/>
              </el-icon>
              搜索
            </el-button>
            <el-button :loading="downLoad" @click="downloadScore()" type="primary" >
              <el-icon><Download /></el-icon>
              导出
            </el-button>
            <el-button @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>



        <el-table width="400px" :data="stuList" style="width: 100%;margin-top: 16px;"
                  @selection-change="handleSelectionChange">
          <el-table-column type="expand" fixed>
            <template #default="scope">
              <el-table :row-class-name="getRowClass"  :data="scope.row.subs" style="width: 100%;margin-top: 16px;">
                <el-table-column width="50px"></el-table-column>
                <el-table-column  prop="electiveId" label="选课id">
                </el-table-column>
                <el-table-column  prop="subName" label="项目名称">
                  <template #default="scope">
                    <span v-if="scope.row.subId != -1">{{scope.row.subName}}</span>
                    <span v-else>科目未选</span>
                  </template>
                </el-table-column>
                <el-table-column  prop="semester" label="学年">
                  <template #default="scope">
                    <span>{{scope.row.year}}</span>
                  </template>
                </el-table-column>
                <el-table-column  prop="semester" label="学期">
                  <template #default="scope">
                    <el-tag>
                      {{getSemesterName(scope.row.semester)}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column  prop="type" label="类型">
                  <template #default="scope">
                    <el-tag v-if="scope.row.type == 1">
                      必考
                    </el-tag>
                    <el-tag type="success" v-else-if="scope.row.type == 2">
                      六选二
                    </el-tag>
                    <el-tag type="warning" v-else-if="scope.row.type == 3">
                      八选二
                    </el-tag>
                    <el-tag  type="danger" v-else-if="scope.row.type == 4">
                      体质健康
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column  prop="rawScore" label="最终原始成绩">
                  <template #default="scope">
                    <span>{{scope.row.finalScore?.rawScore}}</span>
                    <span>{{scope.row.unit!=null&&scope.row.finalScore?.rawScore!=null?scope.row.unit:''}}</span>
                  </template>
                </el-table-column>
                <el-table-column  prop="conversionScore" label="最终换算成绩">
                  <template #default="scope">
                    <span>{{scope.row.finalScore?.conversionScore}}</span>
                  </template>
                </el-table-column>
                <el-table-column type="expand" fixed>
                  <template #default="children">
                    <el-table :data="children.row.items" v-if="children.row.items?.length>0" style="width: 100%;margin-top: 16px;">
                      <el-table-column width="50px"></el-table-column>
                      <el-table-column  prop="itemNo" label="小项编号">
                      </el-table-column>
                      <el-table-column  prop="itemName" label="小项">
                        <template #default="scope">
                          <el-tag
                              type="success">
                            {{scope.row.itemName}}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column  prop="rawScore" label="最终原始成绩">
                        <template #default="scope">
                          <span>{{scope.row.finalScore?.rawScore}}</span>
                          <span>{{scope.row.unit!=null&&scope.row.finalScore?.rawScore!=null?scope.row.unit:''}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column  prop="conversionScore" label="最终换算成绩">
                        <template #default="scope">
                          <span>{{scope.row.finalScore?.conversionScore}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column fixed="right" width="220" label="操作">
                        <template #default="scope">
                          <el-button  link type="primary" size="small" @click="showScoreList(scope.row.itemName,scope.row)">
                            <el-icon>
                              <View/>
                            </el-icon>
                            详情
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" width="220" label="操作">
                  <template #default="scope">
                    <el-button v-if="scope.row.items?.length === 0" link type="primary" size="small" @click="showScoreList(scope.row.subName,scope.row)">
                      <el-icon>
                        <View/>
                      </el-icon>
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

          <el-table-column fixed prop="stuId" label="学生编号">
          </el-table-column>
          <el-table-column fixed prop="stuNo" label="学生考号">
          </el-table-column>
          <el-table-column fixed prop="stuName" label="学生姓名">
          </el-table-column>
          <el-table-column fixed prop="sex" label="性别">
            <template #default="scope">
              <el-tag v-if="scope.row.sex===1" type="success">男</el-tag>
              <el-tag v-else>女</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed prop="className" label="班级">
          </el-table-column>
          <el-table-column fixed prop="year" label="入学时间">
          </el-table-column>
        </el-table>

        <el-pagination
            :page-sizes="[10, 20, 50, 100]"
            :page-count="pagecount"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="currentChange"
            style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
            background layout="total, sizes, prev, pager, next, jumper"/>
      </el-card>
    </div>
  <el-drawer v-model="drawer" :title="title" size="50%">
    <el-table  :data="scoreList" style="width: 100%;margin-top: 16px;"
              show-summary
              fit
              size="medium"
              :summary-method="getFinalScore"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="成绩ID" width="120">
      </el-table-column>

      <el-table-column prop="count" label="次数">
      </el-table-column>
      <el-table-column  prop="rawScore" label="原始成绩">
      </el-table-column>
      <el-table-column  prop="conversionScore" label="换算成绩">
      </el-table-column>

      <el-table-column prop="createTime" width="200px" label="创建时间">
        <template #default="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建人">
        <template #default="scope">
          {{ scope.row.createBy }}
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>


<script>
export default {
  name: 'ScoreCollectManagePage',
  props: {
    // msg: String
  },
  data() {
    const semesterList = [
      {
        "text":"七年级上期",
        "value":1
      },
      {
        "text":"七年级下期",
        "value":2
      },
      {
        "text":"八年级上期",
        "value":3
      },
      {
        "text":"八年级下期",
        "value":4
      },
      {
        "text":"九年级上期",
        "value":5
      },
      {
        "text":"九年级下期",
        "value":6
      },
    ];
    return {
      title:"",
      drawer:false,
      searchForm:{},
      scoreList:[],
      classList:[],
      type:null,
      downLoad:false,
      subjects:[],
      items:[],
      isShowDetail: false,
      isShowEmpty: true,
      detailStuInfo: {},
      stuList: [],
      total: 0,
      multipleSelection: [],
      dialogVisible: false,
      uploadDialogVisible: false,
      selectVisible: false,
      subList: null,
      selectId: null,
      selectSub: null,
      yearAndClass: {},
      semesterList,
      option1 : [],
      stuName:null,
      sex:''
    }
  },
  created() {
    this.getScoreCollect();

  },
  methods: {
    getFinalScore(param){
      const { columns, data } = param;
      const sums = [];
      sums[0] = '最终得分'
      sums[1] = this.finalScore?.id;
      sums[2] = this.finalScore?.count;
      sums[3] = this.finalScore?.rawScore;
      sums[4] = this.finalScore?.conversionScore;
      sums[5] = this.finalScore?.createTime;
      console.log(sums)
      return sums
    },
    showScoreList(subName,item){
      console.log(subName,item)
      this.title = subName +"成绩明细"
      this.drawer = true;
      this.scoreList = item.scoreList;
      this.finalScore = item.finalScore;
    },
    getClassByGrade(grade) {
      let that = this;
      that.classList = [];
      that.classId = null;
      this.$http.post('/class/getClassByGrade', {
        grade: grade
      }).then(function (response) {
        console.log('success' + response);
        that.classList = response.data;
      }).catch(function (error) {
        console.log('error');
      });
    },

    downloadScore(){
      this.downLoad = true;
      var that = this;
      this.$http.post('/score/downScoreCollect',  that.searchForm).then(function (res) {
        console.log('success' + res);
        console.log(res);
        let classObj = that.classList.find(e =>{
          if(e.classId == that.searchForm.classId){
            return e;
          }
        })
        console.log(classObj)
        let semesterObj = that.semesterList.find(e =>{
          if(e.value == that.searchForm.semester){
            return e;
          }
        })
        const blob = new Blob([res], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" });
        const elink = document.createElement("a");
        // elink.download = classObj.className != null?classObj.className:''+"_"+semesterObj.test!= null?semesterObj?.test:''+`_成绩表.doc`;
        elink.download = `成绩表.doc`;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
        that.downLoad = false;

      }).catch(function (error) {
        console.log(error);
      });
    },
    getScoreCollect(){
      let that = this;
      this.$http.post('/score/getScoreCollect', that.searchForm).then(function (response) {
        console.log('success' + response);
        console.info(response.data.records)
        that.stuList = response.data.records;
        that.total = response.data.total;
        that.current = response.data.current;
      }).catch(function (error) {
        console.log('error');
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    reset(){
      this.searchForm = {}
      this.getScoreCollect()
    },

    currentChange(current) {
      this.searchForm.current = current;
      this.getScoreCollect();
    },

    handleSizeChange(size) {
      this.searchForm.size = size;
      console.info(this.searchForm.size)
      this.getScoreCollect();
    },
    // 判断表格是否有子项，无子项不显示展开按钮
    getRowClass (row, rowIndex) {
      // children 是你子项的数组 key
      console.log(row.row.items)
      if (row.row.items?.length === 0) {
        console.log('row-expand-cover')
        return 'row-expand-cover'
      }
    },
    getSemesterName(id){
      let obj = this.semesterList.find(e=>{
        if(id== e.value){
          return e;
        }
      })
      return obj!==undefined?obj.text:""
    },

  }

}
</script>

<style scoped>


/deep/ .el-table .row-expand-cover td .cell .el-table__expand-icon {
  display: none;
}
h3 {
  padding: 0;
  margin: 0;
}

.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}
</style>
